<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <link rel="stylesheet" href="../css/log.css"/>
    <script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="../js/sweetalert.min.js"></script>
</head>
<body class="body1">
<div class="div1">
    <div class="login-form">
        <h1>用户注册</h1>
        <div action="" method="post" id="form1">
            <input type="hidden" name="action" value="register">
            <div class="form-input">
                <input type="text" name="username" placeholder="用户名" id="inputUsername"><img id="isOkusername" alt="" src="" style="height: 20px;width: 20px;display: none"><h6 id="h61" style="position: absolute;margin-left: 200px;margin-top: -20px"></h6><br/>4-20位字母数字下划线
            </div>
            <div class="form-input">
                <input type="password" name="password" placeholder="密码" id="inputPassword"><img id="isOkpassword" alt="" src="" style="height: 20px;width: 20px;display: none"><h6 id="h62" style="position: absolute;margin-left: 200px;margin-top: -20px"></h6><br/>4-20位字母数字下划线
            </div>
            <div class="form-input">
                <input type="password" name="repassword" placeholder="确认密码" id="inputRePassword"><img id="isReOkpassword" alt="" src="" style="height: 20px;width: 20px;display: none"><h6 id="h63" style="position: absolute;margin-left: 200px;margin-top: -20px"></h6><br/>
            </div>
            <div class="form-input">
                <input type="text" name="nickname" placeholder="昵称">
            </div>
            <div class="form-input">
                <input type="text" name="telephone" placeholder="联系电话" id="inputTelephone"><img id="istelephone" alt="" src="" style="height: 20px;width: 20px;display: none"><h6 id="h64" style="position: absolute;margin-left: 200px;margin-top: -20px"></h6><br/>
            </div>
            <div class="form-input">
                <input type="text" name="email" placeholder="电子邮箱" id="inputEmail"><img id="isEmail" alt="" src="" style="height: 20px;width: 20px;display: none"><h6 id="h65" style="position: absolute;margin-left: 200px;margin-top: -20px"></h6><br/>
            </div>
            <div class="fom-choose">
                性别:<input type="radio" name="gender" value="M" checked="checked">男 <input type="radio" name="gender"
                                                                                          value="W">女<br/>
            </div>
            <div class="form-input">
                <button type="submit" name="regist" id="subBtn">注册</button>
                <button type="reset" name="refill">重填</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $("#inputUsername").live('change',function () {
            $.ajax({
                async: true,
                method: 'POST',
                url: './user.do?action=isExistsUsername',
                data:{
                    username:$(':input[name=username]').val(),
                },
                dataType: 'text',
                success:function (data) {
                    if (data != ""){
                        var jsonObj = JSON.parse(data)
                        $('#isOkusername').css('display','')
                        $('#isOkusername').attr('src',"../webImg/default.png")
                        $('#h61').text("用户名已存在")
                    }

                },

            })
        })
    })
</script>

<script type="text/javascript">
    $(function () {
        $("#inputUsername").live('change',function () {
            var $usernameReg = /[a-zA-Z0-9_]{4,20}/;
            $username = $('input[name = "username"]').val();
            if ($username != "") {
                if (!$usernameReg.test($username)) {
                    // alert("用户名格式有误");
                    $('#isOkusername').css('display','')
                    $('#isOkusername').attr('src',"../webImg/default.png")
                    return false;
                }else {
                    $('#isOkusername').css('display','')
                    $('#isOkusername').attr('src',"../webImg/success.png")
                    $('#h61').text(" ")
                }
            } else {
                //为空
                $('#isOkusername').css('display','none')
                $('#isOkusername').attr('src',"../webImg/default.png")
                $('#h61').text(" ")
                return false;
            }
        })

        $("#inputPassword").live('change',function () {
            var $passwordReg = /[a-zA-Z0-9_]{4,20}/;
            $password = $('input[name = "password"]').val();
            if ($password != "") {
                if (!$passwordReg.test($password)) {
                    // alert("用户名格式有误");
                    $('#isOkpassword').css('display','')
                    $('#isOkpassword').attr('src',"../webImg/default.png")
                    return false;
                }else {
                    $('#isOkpassword').css('display','')
                    $('#isOkpassword').attr('src',"../webImg/success.png")
                    $('#h62').text(" ")
                }
            } else {
                //为空
                $('#isOkpassword').css('display','none')
                $('#isOkpassword').attr('src',"../webImg/default.png")
                $('#h62').text(" ")
                return false;
            }
        })

        $("#inputRePassword").live('change',function () {
            $password = $('input[name = "password"]').val();
            $repassword = $('input[name = "repassword"]').val();
            if ($repassword != $password){
                $('#isReOkpassword').css('display','')
                $('#isReOkpassword').attr('src',"../webImg/default.png")
                $('#h63').text("两次输入密码不一致")
                return false;
            }else {
                $('#isReOkpassword').css('display','')
                $('#isReOkpassword').attr('src',"../webImg/success.png")
                $('#h63').text(" ")
            }
        })

        $("#inputTelephone").live('change',function () {
            $telephone = $('input[name = "telephone"]').val();
            var $phoneReg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
            if (!$phoneReg.test($telephone)){
                $('#istelephone').css('display','')
                $('#istelephone').attr('src',"../webImg/default.png")
                $('#h64').text("手机号格式有误")
            }else {
                $('#istelephone').css('display','')
                $('#istelephone').attr('src',"../webImg/success.png")
                $('#h64').text(" ")
            }
        })

        $("#inputEmail").live('change',function () {
            $email = $('input[name = "email"]').val();
            var $emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
            if (!$emailReg.test($email)){
                $('#isEmail').css('display','')
                $('#isEmail').attr('src',"../webImg/default.png")
                $('#h65').text("邮箱格式有误")
            }else {
                $('#isEmail').css('display','')
                $('#isEmail').attr('src',"../webImg/success.png")
                $('#h65').text(" ")
            }
        })


        $('#subBtn').click(function () {
            //邮箱正则
            var $emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
            $email = $('input[name = "email"]').val();
            if ($email != ""){
                if (!$emailReg.test($email)){
                    alert("邮箱格式有误");
                    return false;
                }
            }else {
                alert("邮箱不能为空");
                return false;
            }

            //用户名正则
            var $usernameReg = /[a-zA-Z0-9_]{4,20}/;
            $username = $('input[name = "username"]').val();
            if ($username != ""){
                if (!$usernameReg.test($username)){
                    alert("用户名格式有误");
                    return false;
                }
            }else {
                alert("用户名不能为空");
                return false;
            }


            //2.密码格式
            var $passwordReg = /[a-zA-Z0-9_]{4,20}/;
            $password = $('input[name = "password"]').val();
            if ($password != ""){
                if (!$passwordReg.test($password)){
                    alert("密码格式有误");
                    return false;
                }
            }else {
                alert("密码不能为空");
                return false;
            }
            //重复密码
            $repassword = $('input[name = "repassword"]').val();
            if ($repassword != $password){
                alert("两次输入密码不一致");
                return false;
            }

            //电话正则
            var $phoneReg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
            telephone = $('input[name = "telephone"]').val();
            if (!$phoneReg.test(telephone)){
                alert("手机格式有误");
                return false;
            }

           nickname = $('input[name = "nickname"]').val();
            if (nickname == ""){
                alert("昵称有误");
                return false;
            }
            // debugger;
            $.ajax({
                async: true,
                method: 'GET',
                url: './user.do?action=register',
                data: {
                    "username":$(':input[name=username]').val(),
                    "password":$(':input[name=password]').val(),
                    "nickname":$(':input[name=nickname]').val(),
                    "telephone":$(':input[name=telephone]').val(),
                    "email":$(':input[name=email]').val(),
                    "gender":$(':input[name=gender]').val(),
                },
                dataType: 'text',
                success:function (data) {
                    if (data!=null){
                        var jsonObj = JSON.parse(data);
                        console.log(jsonObj)
                        console.log("data不为空")
                        // var jsonObj = JSON.parse(data)
                        window.location.href = "./index.jsp"
                    }
                },
                error:function (data) {
                    // debugger;
                    swal({
                        title:'登录失败',
                        icon:'error',
                        text:'登录失败',
                        confirmButtonText: "确定",
                    }).then(function () {
                        window.location.href = "./login.jsp"
                    })

                }

            })


        })

    })
</script>



</body>
</html>